<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <meta name="theme-color" content="#000000"/>
  <meta
      name="description"
      content="Web site created using create-react-app"
  />
  <title>React App</title>
</head>
<body>
<div id="root"></div>
<!--<div>-->
<!--  <button id="single1">1.key相同,类型相同,数量相同</button>-->
<!--  <br/>-->
<!--  &lt;div key=&quot;title&quot; id=&quot;title&quot;&gt;<br/>-->
<!--  &nbsp;&nbsp;div<br/>-->
<!--  &lt;/div&gt;<br/>-->
<!--  <button id="single1Update">复用老节点，只更新属性</button>-->
<!--  <br/>-->
<!--  &lt;div key=&quot;title&quot; id=&quot;title2&quot;&gt;<br/>-->
<!--  &nbsp;&nbsp;div2<br/>-->
<!--  &lt;/div&gt;-->
<!--</div>-->
<!--<hr/>-->
<!--<div>-->
<!--  <button id="single2">2.key相同,类型不同</button>-->
<!--  <br/>-->
<!--  &lt;div key=&quot;title&quot; id=&quot;title&quot;&gt;<br/>-->
<!--  &nbsp;&nbsp;div<br/>-->
<!--  &lt;/div&gt;<br/>-->
<!--  <button id="single2Update">删除老节点，添加新节点</button>-->
<!--  <br/>-->
<!--  &lt;p key=&quot;title&quot; id=&quot;title&quot;&gt;<br/>-->
<!--  &nbsp;&nbsp;p<br/>-->
<!--  &lt;/p&gt;<br/>-->
<!--</div>-->
<!--<hr/>-->
<!--<div>-->
<!--  <button id="single3">3.类型相同,key不同</button><br/>-->
<!--  &lt;div key=&quot;title1&quot; id=&quot;title&quot;&gt;<br/>-->
<!--  &nbsp;&nbsp;title<br/>-->
<!--  &lt;/div&gt;<br/>-->
<!--  <button id="single3Update">删除老节点，添加新节点</button><br/>-->
<!--  &lt;div key=&quot;title2&quot; id=&quot;title&quot;&gt;<br/>-->
<!--  &nbsp;&nbsp;title<br/>-->
<!--  &lt;/div&gt;<br/>-->
<!--</div>-->
<!--<hr/>-->
<!--<div>-->
<!--  <button id="single4">4.原来多个节点，现在只有一个节点</button><br/>-->
<!--  &lt;ul key=&quot;ul&quot;&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;A&quot;&gt;A&lt;/li&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;B&quot; id=&quot;B&quot;&gt;B&lt;/li&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;C&quot;&gt;C&lt;/li&gt;<br/>-->
<!--  &lt;/ul&gt;<br/>-->
<!--  <button id="single4Update">保留并更新这一个节点，删除其它节点</button><br/>-->
<!--  &lt;ul key=&quot;ul&quot;&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;B&quot; id=&quot;B2&quot;&gt;B2&lt;/li&gt;<br/>-->
<!--  &lt;/ul&gt;<br/>-->
<!--</div>-->
<!--<hr/>-->

<!--<div>-->
<!--  <button id="multi1">5.多个节点的数量和key相同，有的type不同</button><br/>-->
<!--  &lt;ul key=&quot;ul&quot;&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;A&quot;&gt;A&lt;/li&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;B&quot; id=&quot;B&quot;&gt;B&lt;/li&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;C&quot;id=&quot;C&quot;&gt;C&lt;/li&gt;<br/>-->
<!--  &lt;/ul&gt;<br/>-->
<!--  <button id="multi1Update">更新属性，type不同的删除老节点，删除新节点</button><br/>-->
<!--  &lt;ul key=&quot;ul&quot;&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;A&quot;&gt;A&lt;/li&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;p key=&quot;B&quot; id=&quot;B2&quot;&gt;B2&lt;/p&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;C&quot; id=&quot;C2&quot; &gt;C2&lt;/li&gt;<br/>-->
<!--  &lt;/ul&gt;<br/>-->
<!--</div>-->
<!--<hr/>-->

<!--<div>-->
<!--  <button id="multi2">6.多个节点的类型和key全部相同，有新增元素</button><br/>-->
<!--  &lt;ul key=&quot;ul&quot;&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;A&quot;&gt;A&lt;/li&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;B&quot; id=&quot;B&quot;&gt;B&lt;/li&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;C&quot;&gt;C&lt;/li&gt;<br/>-->
<!--  &lt;/ul&gt;<br/>-->
<!--  <button id="multi2Update">增加新元素并更新老元素</button><br/>-->
<!--  &lt;ul key=&quot;ul&quot;&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;A&quot;&gt;A&lt;/li&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;B&quot; id=&quot;B2&quot;&gt;B2&lt;/li&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;C&quot;&gt;C&lt;/li&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;D&quot;&gt;D&lt;/li&gt;<br/>-->
<!--  &lt;/ul&gt;<br/>-->
<!--</div>-->
<!--<hr/>-->

<!--<div>-->
<!--  <button id="multi3">7.多个节点的类型和key全部相同，有删除老元素</button><br/>-->
<!--  &lt;ul key=&quot;ul&quot;&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;A&quot;&gt;A&lt;/li&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;B&quot; id=&quot;B&quot;&gt;B&lt;/li&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;C&quot;&gt;C&lt;/li&gt;<br/>-->
<!--  &lt;/ul&gt;<br/>-->
<!--  <button id="multi3Update">删除老元素并更新老元素</button><br/>-->
<!--  &lt;ul key=&quot;ul&quot;&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;A&quot;&gt;A&lt;/li&gt;<br/>-->
<!--  &nbsp;&nbsp;&lt;li key=&quot;B&quot; id=&quot;B2&quot;&gt;B2&lt;/li&gt;<br/>-->
<!--  &lt;/ul&gt;<br/>-->
<!--</div>-->
<!--<hr/>-->

<div>
  <button id="multi5">9.多个节点数量不同、key不同</button>
  <br/>
  &lt;ul key=&quot;ul&quot;&gt;<br/>
  &nbsp;&nbsp;&lt;li key=&quot;A&quot;&gt;A&lt;/li&gt;<br/>
  &nbsp;&nbsp;&lt;li key=&quot;B&quot; id=&quot;b&quot;&gt;B&lt;/li&gt;<br/>
  &nbsp;&nbsp;&lt;li key=&quot;C&quot;&gt;C&lt;/li&gt;<br/>
  &nbsp;&nbsp;&lt;li key=&quot;D&quot;&gt;D&lt;/li&gt;<br/>
  &nbsp;&nbsp;&lt;li key=&quot;E&quot;&gt;E&lt;/li&gt;<br/>
  &nbsp;&nbsp;&lt;li key=&quot;F&quot;&gt;F&lt;/li&gt;<br/>
  &lt;/ul&gt;<br/>
  <button id="multi5Update">处理节点移动的情况</button>
  <br/>
  &lt;ul key=&quot;ul&quot;&gt;<br/>
  &nbsp;&nbsp;&lt;li key=&quot;A&quot;&gt;A&lt;/li&gt;<br/>
  &nbsp;&nbsp;&lt;li key=&quot;C&quot;&gt;C&lt;/li&gt;<br/>
  &nbsp;&nbsp;&lt;li key=&quot;E&quot;&gt;E&lt;/li&gt;<br/>
  &nbsp;&nbsp;&lt;li key=&quot;B&quot; id=&quot;b2&quot;&gt;B2&lt;/li&gt;<br/>
  &nbsp;&nbsp;&lt;li key=&quot;G&quot;&gt;G&lt;/li&gt;<br/>
  &nbsp;&nbsp;&lt;li key=&quot;D&quot;&gt;D&lt;/li&gt;<br/>
  &lt;/ul&gt;<br/>
</div>
<hr/>

</body>
</html>
